<template>
  <div>
    验证<el-button @click="add">+</el-button>
    
    <el-form v-model="value" label-width="100px" >
      <li v-for="(v,index) in value">
        <el-form-item label="验证">          
          <el-select v-model="v.vali">
            <el-option v-for="o in valis" :label="o" :value="o" :key="o"></el-option>
          </el-select>
          <el-button @click="remove(index)">-</el-button>
        </el-form-item>
        <el-form-item label="类型" v-if="v.vali=='type'">
          <el-select v-model="v.type">
            <el-option v-for="o in types" :label="o" :value="o" :key="o"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="正则" v-if="v.vali=='pattern'">
          <el-input v-model="v.pattern"></el-input>
        </el-form-item>
        <el-form-item label="范围" v-if="v.vali=='range'">
          <el-input v-model="v.min"></el-input>
          --
          <el-input v-model="v.max"></el-input>
        </el-form-item>
        <el-form-item label="自定义" v-if="v.vali=='custom'">
          <el-popover
            placement="bottom"            
            
            trigger="click"
          >
            <pre>
              示例: v=>{return v.length>0}
            </pre>
            <el-button slot="reference">?</el-button>
          </el-popover>
          
          <el-input v-model="v.script" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="提示语">
          <el-input v-model="v.message"></el-input>
        </el-form-item>
        <el-form-item label="触发">
          <el-select v-model="v.trigger">
            <el-option v-for="o in triggers" :label="o" :value="o" :key="o"></el-option>
          </el-select>
        </el-form-item>
        <hr />
      </li>
      
    </el-form>        
  </div>
</template>

<script>
// 设置表单验证 组件
export default {
  props:['value'],
  methods:{
    add(){      
      this.value.push({})
    },
    remove(i){
      this.value.splice(i,1)
    }
  },
  data(){
    return {
      valis:['required','range','type','pattern','custom'],
      types:['number','boolean','integer','array','date'],
      triggers:['blur','change']
    }
  }
}
</script>

<style>

</style>